<template>
  <div class="mt--20 purchase-detail">
    <el-tabs type="border-card">
      <el-tab-pane label="调拨基础信息">
        <div class="detail-section">
          <el-row type="flex" align="middle">
            <el-col :span="12">调拨单基础信息</el-col>
            <el-col class="text-right" :span="12">
              <el-button
                type="success"
                :disabled="!(viewForm.status === '新建调拨单' && !isAudit)"
                @click="auditPassFun(viewForm.id)"
                >调拨审核通过</el-button
              >
              <el-button
                type="success"
                :disabled="!(viewForm.status === '新建调拨单' && !isAudit)"
                @click="auditUnPassFun(viewForm.id)"
                >调拨审核驳回</el-button
              >
              <el-button type="danger" @click="print">打印调拨单</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form
            :model="viewForm"
            class="detail-form"
            label-width="120px"
            label-suffix=":"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="调拨单号">
                  <span class="detail-value">{{ viewForm.code }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库门店">
                  <span class="detail-value">{{ viewForm.outStoreName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库仓库">
                  <span class="detail-value">{{
                    viewForm.outStorageName
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="调拨原因">
                  <span class="detail-value">{{ viewForm.allotReason }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="单据日期">
                  <span class="detail-value">{{ viewForm.receiptsTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入库门店">
                  <span class="detail-value">{{ viewForm.storeName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入库仓库">
                  <span class="detail-value">{{ viewForm.inStorageName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="调拨配件数量">
                  <span class="detail-value">{{ viewForm.num }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出库备注">
                  <span class="detail-value">{{ viewForm.remark }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="调拨状态">
                  <span class="detail-value">{{ viewForm.status }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库总金额">
                  <span class="detail-value">￥{{ viewForm.amount }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>调拨负责人</el-row>
          <el-divider></el-divider>
          <el-form
            :model="viewForm"
            class="detail-form"
            label-width="120px"
            label-suffix=":"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="出库负责人">
                  <span class="detail-value">{{ viewForm.userName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式">
                  <span class="detail-value">{{ viewForm.phone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>调拨进度</el-row>
          <el-divider></el-divider>
          <steps
            v-if="viewForm.statusList != null && viewForm.statusList.length > 0"
            :setpsList="viewForm.statusList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="调拨单信息">
        <div class="detail-section">
          <el-row>调拨精品列表</el-row>
          <el-divider></el-divider>
          <data-table
            :has-action="false"
            :value="tableData"
            :total-count="totalCount"
            :isShowSerialNum="true"
            :table-column-attributes="tableColumns"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <div class="total-count" slot="allNum">
              配件总金额:<span class="money-value"
                >￥{{ viewForm.amount ? viewForm.amount : 0 }}</span
              >
            </div>
          </data-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <print-form /> -->
  </div>
</template>

<script>
import BaseLayout from '@/views/layout/Base'
import DataTable from '@/components/DataTable'
import PrintForm from './PrintForm'
import { Steps } from '@/components/index'
import { exportFile } from '@/utils/index'
import {
  getBaseList,
  auditPass,
  auditUnPass,
} from '@/api/pre-sale/boutiqueStock/transferManagement'

export default {
  components: { BaseLayout, DataTable, PrintForm, Steps },
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      totalCount: 0,
      allotId: '', // 调拨单id
      searchOptions: {},
      progressInfo: {},
      tableData: [],
      viewForm: {},
      isAudit: false,
      tableColumns: [
        { name: '精品编号', value: 'partsCode', type: 'text' },
        { name: '精品名称', value: 'partsName', type: 'text' },
        { name: '一级类别', value: 'partsType', type: 'text' },
        { name: '二级类别', value: 'partsUnit', type: 'text' },
        { name: '仓位', value: 'outStorageSiteName', type: 'text' },
        { name: '仓位编号', value: 'outStorageSiteCode', type: 'text' },
        { name: '出库数量', value: 'num', type: 'text' },
        { name: '仓位剩余', value: 'outStorageSiteRemainNum', type: 'text' },
        { name: '采购成本', value: 'purchasePrice', type: 'text' },
        { name: '销售价', value: 'storagePrice', type: 'text' },
        { name: '总金额', value: 'amount', type: 'text' },
      ],
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function (newValue, oldValue) {
        this.setData()
      },
    },
  },
  created() {
    this.setData()
  },
  methods: {
      async print(){
     exportFile(`${process.env.BASE_API}/sq/brandAllot/print/${this.viewForm.id}`,`${this.viewForm.code}-调拨单.pdf`);
    },
    setData() {
      if (this.value) {
        this.viewForm = this.value
        this.allotId = this.value.id
        this.getTableData()
      }
    },
    async getTableData() {
      let { data } = await getBaseList(
        this.searchOptions,
        this.pageSize,
        this.currentPage,
        this.allotId
      )
      this.tableData = data.content
      this.totalCount = parseInt(data.totalRecords)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getTableData()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getTableData()
    },
    // 审核通过
    async auditPassFun(id) {
      let { success, data } = await auditPass(id)
      if (success) {
        this.isAudit = true
        this.$message.success('操作成功')
      } else {
        this.$message.success('操作失败')
      }
      this.$emit('back-status')
    },

    // 审核不通过
    async auditUnPassFun(id) {
      let { success, data } = await auditUnPass(id,'被驳回')
      if (success) {
        this.isAudit = true
        this.$message.success('操作成功')
      } else {
        this.$message.success('操作失败')
      }
       this.$emit('back-status')
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/ {
  .el-step__icon.is-icon {
    background: inherit;
  }
  .el-icon-success {
    color: #85ce61;
  }
  .el-icon-caret-right {
    color: #f56c6c;
  }
}
</style>
